<template>
  <div class="search-form">
    <el-form :inline="true" :model="form" class="demo-form-inline">
			<el-form-item label="客户手机">
				<el-input v-model="form.phone" placeholder="请输入客户手机"></el-input>
			</el-form-item>
			<el-form-item label="销售门店">
				<el-select v-model="form.store" placeholder="请选择销售门店">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="item in storeOptions" :key="item.value + item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属工厂">
				<el-select v-model="form.factory" placeholder="请选择所属工厂">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="item in factoryOptions" :key="item.value + item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select v-model="form.status" placeholder="请选择订单状态">
					<el-option label="全部" value=""></el-option>
					<el-option v-for="item in statusOptions" :key="item.value + item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="下单时间">
				<el-date-picker
          v-model="form.dateTime"
          type="daterange"
          format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
  </div>

  <el-divider></el-divider>
</template>

<script>
 import { defineComponent, reactive, toRefs } from 'vue';

 export default defineComponent({
   setup(props) {
     const state = reactive({
      form: {
      },
      storeOptions: [
        {
          label: '门店一',
          value: 1
        },
        {
          label: '门店二',
          value: 2
        },
        {
          label: '门店三',
          value: 3
        }
      ],
      statusOptions: [
        {
          label: '未支付',
          value: 1
        },
        {
          label: '待发货',
          value: 2
        },
        {
          label: '已发货',
          value: 3
        }
      ],
      factoryOptions: [
        {
          label: '工厂一',
          value: 1
        },
        {
          label: '工厂二',
          value: 2
        },
        {
          label: '工厂三',
          value: 3
        }
      ]
     })

    const onSubmit = () => {
      console.log(state.form);
    }

     return {
       ...toRefs(state),
       onSubmit
     }
   }
 })
</script>